<template >
  <div class="login">
    <div class="content">
      <div class="header">
        <img src="@/assets/img/login_logo.png"
             alt="">
        <span>黑马面面</span>
        <i></i>
        <span>用户登陆</span>
      </div>
      <Form class="form"></Form>
      <Register></Register>

    </div>

  </div>
</template>

<script>
import Form from './components/form.vue'
import Register from './components/register.vue'
export default {
  components: {
    Form,
    Register
  },
  data () {
    return {

    }
  }
}
</script>

<style lang='less' scoped>
.login {
  // 盒子与浏览器同宽高
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/img/login_banner_ele.png") center right no-repeat,
    linear-gradient(#1493fa 28%, #01c6fa 96%);
  overflow: hidden;
  padding: 0 73px;
  .content {
    width: 478px;
    height: 550px;
    background-color: #f5f5f5;
    margin-top: 119px;
    padding-top: 50px;
    padding-left: 48px;
    padding-right: 41px;
    .header {
      display: flex;
      align-items: center;
      span {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: #0c0c0c;
        margin: 0 12px;
      }
      i {
        display: block;
        width: 2px;
        height: 25px;
        background: #c7c7c7;
      }
    }

  }
  .form {
    margin-top: 29px;
  }
}
@media screen and (max-width: 624px) {
  .login {
    .content {
      width: auto
    }
  }
}
</style>
